<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2,'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background}">
		<uni-nav-bar @clickLeft="back" left-icon="left" title="阅读记录" right-text="删除选中" @clickRight="del()">
		</uni-nav-bar>

		<scroll-view :style="{'height':scroll_height+'px !important'}" :scroll-y="true">
			<view style="height: 20rpx;" v-if="List.length"></view>
			<block v-for="i in List" :keys="i.time">
				<view style="display: flex;align-items: center;">
					<checkbox-group   style="padding: 0 20rpx;" @change="select($event,i)">
						<checkbox :checked="i.select" />
					</checkbox-group>

					<view class="item" v-if="i" @click="jump(i)">


						<view class="left">
							<image class="cover" @load="load(i)" :src="i.image" mode="aspectFit"></image>
							<image class="cover" v-if="!i.is_load" src="../../static/cover.jpeg" mode="aspectFit">
							</image>
						</view>

						<view class="right">
							<view class="name">
								{{i.name}}
							</view>

							<view class="author">
								作者:{{i.author}}
							</view>

							<view class="time">
								最近:{{dateFormat(i.time)}}
							</view>
						</view>

						<view class="surplus">
							{{i.total==0?'未':(i.total-i.currentchapters)==0?'完':(i.total-i.currentchapters)<=99?(i.total-i.currentchapters):'99+'}}
						</view>
					</view>

				</view>
			</block>
			<view v-if="List.length==0" :style="{'height':scroll_height+'px !important'}" class="empty">
				<image src="../../static/empty.png" mode=""></image>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import {
		getList
	} from '../../api/index.js'
	import {
		getSystem
	} from 'api/system.js'

	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		data() {
			return {
				keyword: null,
				List: [],
				listQuery: {
					page: 1,
					limit: 10
				},
				scroll_height: 0
			};
		},
		onLoad() {
			this.List = this.$store.state.data.novelList
			this.scroll_height = getApp().globalData.screenHeight - 44 - getApp()
				.globalData.statusBarHeight
		},
		onShow() {

			this.init()
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif

		},

		onReady() {
			//#ifdef APP
			plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
			//#endif
		},

		methods: {
			back() {
				uni.navigateBack()
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			},
			del() {
				let list = JSON.parse(JSON.stringify(this.List))
				for (let i = 0; i < list.length; i++) {
					const s = list[i]
					if (s.select) {
						let key = 'novel_' + s.name + '_' + s.author
						let index = this.List.map(i => {
							return "novel_" + i.name + "_" + i.author
						}).indexOf(key)
						this.List.splice(index, 1)
						uni.removeStorageSync(key)
					}
				}
				this.List=JSON.parse(JSON.stringify(this.List))
				this.$store.commit('data/SET_NOVELLIST', this.List)
			},
			select(e, i) {
				this.$set(i,"select",!i.select)
				this.$forceUpdate()
			},
			load(i) {
				this.$set(i, 'is_load', true)
			},
			jump(i) {
				uni.setStorageSync('info', i)
				uni.navigateTo({
					url: "../index/index"
				})
			},
			PxToRpx(num) {
				return PxToRpx(num)
			},
			RpxToPx(num) {
				return RpxToPx(num)
			},
			init() {
				//#ifdef APP
				plus.navigator.setStatusBarStyle(this.$store.state.theme.themeType == 'dark' ? 'light' : 'dark');
				//#endif
			},

		}
	}
</script>

<style lang="less">
	.container.dark {

		/deep/.uni-nav-bar-text {
			color: white !important;
		}

		/deep/.uni-icons {
			color: white !important;
		}

		/deep/.uni-nav-bar-right-text {
			color: white !important;
		}
	}

	.container {
		background: var(--background);

		/deep/.uni-navbar__header {
			background-color: var(--background) !important;
			border: none;
		}

		/deep/.uni-navbar__content {
			border: none;
		}

		.empty {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item {
			display: flex;
			margin: 20rpx 40rpx;
			margin-left: 0;
			margin-top: 0;
			padding: 10rpx;
			border-radius: 10rpx;
			background-color: var(--nav_color);
			height: 200rpx;
			background-color: var(--background);
			box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
			position: relative;

			.surplus {
				position: absolute;
				color: var(--color-main);
				background-color: var(--background);
				box-shadow: 10rpx 10rpx 15rpx var(--color1), -10rpx -10rpx 15rpx var(--color2);
				right: 10rpx;
				bottom: 10rpx;
				font-size: 24rpx;
				height: 40rpx;
				padding: 0 10rpx;
				line-height: 40rpx;
				border-radius: 9999px;
				text-align: center;

			}

			.left {
				width: 150rpx;

				/deep/div {
					background-size: 100% 100% !important;
				}

				.none {
					display: none;
				}

				.cover {
					position: absolute;
					height: 200rpx;
					width: 150rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

				}
			}

			.right {
				padding-left: 30rpx;

				.name {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bolder;
					padding: 20rpx 0;
					width: 400rpx;
				}

				.author {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
					width: 400rpx;
				}

				.time {
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
					width: 400rpx;
				}
			}
		}
	}
</style>
